<template>
  <div class="branch-div">
    <div class="add-div">
      <el-form :inline="true" :model="branch" :rules="branchRules" ref="branchRuleFormRef">
        <el-form-item label="机构名称" prop="branchName">
          <el-input v-model="branch.branchName"/>
        </el-form-item>
        <el-form-item label="机构简称" prop="branchShortName">
          <el-input v-model="branch.branchShortName"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitBranchForm(branchRuleFormRef)">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="branchId" label="ID"/>
        <el-table-column prop="branchName" label="机构名称"/>
        <el-table-column prop="branchShortName" label="机构简称"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button plain @click="showUpdBranch(scope.row)" type="primary" circle>
              改
            </el-button>
            <el-button type="danger" @click="delBranch(scope.row.branchId)" circle>删</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <el-dialog v-model="dialogFormVisible" title="修改机构" width="500">
    <el-form ref="updBranchRuleFormRef" :model="updBranch" :rules="branchRules">
      <el-form-item label="机构名称" :label-width="formLabelWidth" prop="branchName">
        <el-input v-model="updBranch.branchName"/>
      </el-form-item>
      <el-form-item label="机构简称" :label-width="formLabelWidth" prop="branchShortName">
        <el-input v-model="updBranch.branchShortName"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="submitUpdBranchForm(updBranchRuleFormRef)">保存</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script lang="ts" setup>
import {ref, onMounted, reactive} from "vue";
import api from "@/axios.js";
import {ElMessage, type FormInstance, type FormRules} from "element-plus";

interface BranchInfo {
  branchId?: Number,
  branchName?: String,
  branchShortName?: String
}

onMounted(() => {
  selBranchInfo();
})

const branchRuleFormRef = ref<FormInstance>();

const branchRules = reactive<FormRules<BranchInfo>>({
  branchName: [
    {required: true, message: '请输入机构名', trigger: 'blur'},
  ],
  branchShortName: [
    {required: true, message: '请输入机构简称', trigger: 'blur'},
  ],
})

// 添加
const branch = ref<BranchInfo>({});

const submitBranchForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      api({url: "/addBranchInfo", method: "post", params: branch.value}).then(resp => {
        if (resp.data.code == 1)
          selBranchInfo();
        ElMessage(resp.data.message);
      });
    } else {
      ElMessage("请按照规则填写")
    }
  })
}

// 修改
const dialogFormVisible = ref<Boolean>(false)
const formLabelWidth = '140px'
const updBranchRuleFormRef = ref<FormInstance>();
let updBranch = ref<BranchInfo>({});

function showUpdBranch(b: BranchInfo) {
  updBranch.value = b;
  dialogFormVisible.value = true;
}

const submitUpdBranchForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      api({url: "/updBranchInfo", params: updBranch.value}).then(resp => {
        if (resp.data.code == 1)
          selBranchInfo();
        ElMessage(resp.data.message);
        dialogFormVisible.value = false;
      })
    } else {
      ElMessage("请按照规则填写")
    }
  })
}

// 查询
let list = ref<BranchInfo[]>([]);

function selBranchInfo() {
  api({url: "/selBranchInfo"}).then(resp => {
    list.value = resp.data;
  });
}

// 删除
function delBranch(branchId: Number) {
  api({url: "/delBranchInfo", params: {branchId: branchId}}).then(resp => {
    if (resp.data.code == 1)
      selBranchInfo();
    ElMessage(resp.data.message);
  });
}

</script>

<style scoped>
.branch-div {
  padding-top: 20px;
}

.add-div {
  margin-bottom: 20px;
}

</style>